<template>
  <div class="backBox">
    <div class="chart1"></div>

    <div class="chart2"></div>

    <div class="chart3"></div>

    <div class="chart4"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart1 = echarts.init(document.querySelector('.chart1'))
  // 绘制图表
  myChart1.setOption({
    title: {
      text: '本月产品销售'
    },
    color: ['#ffc0cb'],
    xAxis: {
      type: 'category',
      data: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [50, 48, 54, 80, 70, 110, 130],
        type: 'bar',
        label: {
          show: true, //开启显示
          position: 'top', //在上方显示
          textStyle: {
            //数值样式
            color: 'black', //字体颜色
            fontSize: 20 //字体大小
          }
        }
      }
    ]
  })

  // 基于准备好的dom，初始化echarts实例
  var myChart2 = echarts.init(document.querySelector('.chart2'))
  // 绘制图表
  myChart2.setOption({
    title: {
      text: '招聘奶茶销售趋势'
    },
    xAxis: {
      type: 'category',
      data: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [50, 45, 35, 30, 55, 49, 26],
        type: 'line',
        itemStyle: {
          normal: {
            lineStyle: {
              width: 5 // 0.1的线条是非常细的了
            }
          }
        },
        label: {
          show: true, //开启显示
          position: 'top', //在上方显示
          textStyle: {
            //数值样式
            color: 'black', //字体颜色
            fontSize: 20 //字体大小
          }
        }
      }
    ]
  })

  // 基于准备好的dom，初始化echarts实例
  var myChart3 = echarts.init(document.querySelector('.chart3'))
  // 绘制图表
  myChart3.setOption({
    title: {
      text: '销售量比例',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 100, name: '柠檬水' },
          { value: 68, name: '暴打前男友' },
          { value: 87, name: '杨枝甘露' },
          { value: 34, name: '芋泥波波奶茶' },
          { value: 90, name: '鸭屎香柠檬茶' },
          { value: 60, name: '草莓水果茶' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })

  // 基于准备好的dom，初始化echarts实例
  var myChart4 = echarts.init(document.querySelector('.chart4'))
  // 绘制图表
  myChart4.setOption({
    title: {
      text: '销售量'
    },
    color: ['#fe2858'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['柠檬水', '草莓水果茶', '鸭屎香柠檬茶', '芋泥波波奶茶', '杨枝甘露', '暴打前男友']
    },
    series: [
      {
        name: '2024',
        type: 'bar',
        data: [97, 23, 78, 90, 56, 74],
        label: {
          show: true, //开启显示
          position: 'right', //在上方显示
          textStyle: {
            //数值样式
            color: 'black', //字体颜色
            fontSize: 20 //字体大小
          }
        }
      }
    ]
  })
})
</script>

<style scoped>
.backBox {
  margin-left: 20px;
  margin-top: 20px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

.backBox div {
  height: 400px;
}
</style>